<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        
        <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
        </script>
        <![endif]-->

        <link href="resources/company_icon_32x32.ico" rel="shortcut icon" type="image/ico" />
        <link href="css/${presentationMedium}/main.css" rel="stylesheet" type="text/css" />
        <link href="css/${presentationMedium}/menubar.css" rel="stylesheet" type="text/css" />
        <link href="css/${presentationMedium}/formlayout.css" rel="stylesheet" type="text/css" />
        <link   href="css/tictactoe.css"              rel="stylesheet" />
        <script src="js/3rdpartylibs/jslib_dom_ready.js" type="text/javascript"></script>
        <script src="js/3rdpartylibs/jslib_css.js" type="text/javascript"></script>
        <script src="js/3rdpartylibs/jslib_event.js" type="text/javascript"></script>
        <script src="js/3rdpartylibs/jslib_event_mouse.js" type="text/javascript"></script>
        <script src="js/3rdpartylibs/jslib_event_keyboard.js" type="text/javascript"></script>
        <script src="js/button_handlers.js" type="text/javascript"></script>
        <script src="js/data_validation.js" type="text/javascript"></script>
        <script src="js/menubar.js" type="text/javascript"></script>
        <script src="js/3rdpartylibs/jquery-1.6.1.js" type="text/javascript"></script>
 <!--   <script src="js/utils.js" type="text/javascript"></script> -->
        <script src="js/tictactoe/tictactoe_board.js" type="text/javascript" ></script>
        <script src="js/tictactoe/tictactoe_main.js" type="text/javascript" ></script>

        <title>${appTitle} - ${pageTitle}</title>

    </head>
    <body>
        <!-- body header section -->
        <div id="captionBar">
            <h1>${appTitle} - ${user.profile.firstName} ${user.profile.lastName} playing ${pageTitle}</h1>
        </div>
        <%@ include file="WEB-INF/jspf/new_mainmenu.jspf" %>
        <div id="main">
            <div class="boardPlayers">
                <div id="gameTitle">
                    <span id="humanGamer">Guest</span> Vs. Machine
                </div>
                <img src="resources/x.png" alt="X" draggable />
                <img src="resources/o.png" alt="O" draggable />
            </div>
            <canvas id="gameboard" width="300" height="300" dropzone/>
        </div>    
        <div id="debugInfo">
            xPos = <span id="xPos">n/a</span> , yPos = <span id="yPos">n/a</span> , location = <span id="location">n/a</span>
        </div>
    </body>
</html>